<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <title>
        数据 - AdminLTE2定制版 | Log in</title>


    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <!-- Theme style -->
    <!-- iCheck -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">

</head>

<body class="hold-transition register-page">
    <div class="register-box">
        <div class="register-logo">


            <a href="register.jsp"><b></b>线性代数学习平台</a>


        </div>

        <div class="register-box-body">
            <p class="login-box-msg">新用户注册</p>

            <form action="user" method="post">
                <input type="hidden" name="action" value="register">
                <div class="form-group has-feedback">
                    <input name="username" type="text" class="form-control" placeholder="用户名">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input name="email" type="email" class="form-control" placeholder="Email">
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input id="password" name="password" type="password" class="form-control" placeholder="密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input id="password2" type="password" class="form-control" placeholder="确认密码">
                    <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <label>验证码：</label>&nbsp;&nbsp;&nbsp;
                    <input class="itxt" type="text" name="code" style="width: 80px;" id="code"/>
                    <img id="code_img" alt="换一张" src="Kaptcha.jpg"  style="float: right;width: 120px;hight:30px;margin-right: 40px">

                </div>
                <div class="row">
                    <div class="col-xs-8">
                        <div class="checkbox icheck">
                            <label>
<%--              <input type="checkbox"> 我同意 <a href="#">协议</a>--%>
            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-xs-4">
                        <button id="sub_btn" type="submit" class="btn btn-primary btn-block btn-flat">注册</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>

<%--            <div class="social-auth-links text-center">--%>
<%--                <p>- 或者 -</p>--%>
<%--                <a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-qq"></i> 腾讯QQ用户登录</a>--%>
<%--                <a href="#" class="btn btn-block btn-social btn-google btn-flat"><i class="fa fa-weixin"></i> 微信用户登录</a>--%>
<%--            </div>--%>

            <a href="/login.jsp" class="text-center">我有账号，现在就去登录</a>
        </div>
        <!-- /.form-box -->
    </div>
    <!-- /.register-box -->

    <!-- jQuery 2.2.3 -->
    <!-- Bootstrap 3.3.6 -->
    <!-- iCheck -->
    <script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
    <script>
        $(function() {
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });


            //验证码更新
            $("#code_img").click(function () {
                <%--因缓存而验证码不更新可加时间戳--%>
                <%--this.src="${basePath}/Kaptcha.jpg?d="+new Date();--%>
                this.src="Kaptcha.jpg";
            });
            // 给注册绑定单击事件
            $("#sub_btn").click(function () {

                var passwordText = $("#password").val();
                var passwordText2 = $("#password2").val();
                if (passwordText!==passwordText2) {
                    alert("密码不一致");
                    return false;
                }

                // 验证码
                var codeText = $("#code").val();
                //去掉验证码前后空格
                codeText = $.trim(codeText);

                if (codeText == null || codeText == "") {
                    //4 提示用户
                    alert("验证码不能为空");

                    return false;
                }
                var flag=true;
                //设置ajax同步访问
                $.ajaxSettings.async=false;
                $.getJSON("user","action=code&code="+codeText,function (data) {
                    async:false

                    if (data.result!="t") {
                        alert("验证码错误")
                        flag=false;
                    }else {
                        return true;
                    }
                });
                return flag;

            });
        });
    </script>
</body>

</html>